<!-- 音乐 -->
<template>
    <Banner
    :bannerH="100"
    :typewriterShow="false"
    :animationTime="7"
    :animationSteps="12"></Banner>
    <!-- 菜单导航 -->
    <Menu></Menu>
    <!-- 音乐播放器主体 -->
    <div class="music-container">
        <div class="content">
            <!-- 音乐信息 -->
            <div class="flx info-box">
                <PlayerStyle></PlayerStyle>
                <LyricsInfo></LyricsInfo>
            </div>
            <!-- 控件 -->
            <PlayerControl></PlayerControl>
            <!-- 播放列表 -->
            <PlaySongsList></PlaySongsList>
        </div>
    </div>
</template>

<script setup>
import Banner from '@/layout/components/banner/banner.vue';
import Menu from '@/layout/components/menu/index-menu.vue';

import PlayerStyle from "@/views/system/music/components/player-style/player-style.vue";
import PlayerControl from "@/views/system/music/components/player-control/player-control.vue";
import LyricsInfo from "@/views/system/music/components/lyrics-info/lyrics-info.vue";
import PlaySongsList from "@/views/system/music/components/play-songs-list/play-songs-list.vue";

</script>

<style lang="scss" scoped>
    @import '@/theme/public.scss';
    @import '@/theme/animations.scss';
    @import './music.scss';
</style>